<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电梯监测</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f5f7fa; margin: 0; padding: 0; }
        .container { max-width: 1200px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0,0,0,.08); padding: 32px 24px 24px 24px; }
        .title { font-size: 22px; font-weight: bold; color: #1565C0; margin-bottom: 24px; }
        .section { margin-bottom: 28px; }
        .el-card__header { font-size: 16px; font-weight: 600; color: #303133; }
        .el-button.center-text { display: flex !important; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; height: 28px; min-width: 80px; border-radius: 0; padding: 0 18px; line-height: 28px; }
        .alarm-section-card { border: 2px solid #F56C6C !important; background: #FEF0F0 !important; }
    </style>
</head>
<body>
    <div id="elevator-monitor">
        <div class="container">
            <div class="title"><i class='bx bx-building-house'></i> 电梯监测</div>
            <el-tabs v-model="activeTab">
                <!-- 1. 电梯列表 -->
                <el-tab-pane label="电梯列表" name="list">
                    <el-table :data="elevators" border stripe size="small">
                        <el-table-column prop="name" label="电梯名称" width="180"></el-table-column>
                        <el-table-column prop="location" label="安装位置"></el-table-column>
                        <el-table-column label="是否离线">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status==='离线'?'danger':'success'" size="mini">{{scope.row.status==='离线'?'是':'否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否告警">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.alert ? 'danger' : 'success'" size="mini">{{scope.row.alert ? '是' : '否'}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="140">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" class="center-text" @click="openBindDialog(scope.row)">绑定信息</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 绑定信息弹窗 -->
                    <el-dialog :visible.sync="bindDialogVisible" title="绑定信息配置" width="500px" append-to-body>
                        <el-form :model="bindForm" label-width="120px" size="small">
                            <el-form-item label="绑定电梯轿厢">
                                <el-select v-model="bindForm.car" placeholder="请选择电梯轿厢">
                                    <el-option v-for="car in allCars" :key="car" :label="car" :value="car"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定电梯机房">
                                <el-select v-model="bindForm.machineRoom" placeholder="请选择电梯机房">
                                    <el-option v-for="room in allMachineRooms" :key="room" :label="room" :value="room"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定空调控制器">
                                <el-select v-model="bindForm.ac" placeholder="请选择空调控制器">
                                    <el-option v-for="ac in allAcs" :key="ac" :label="ac" :value="ac"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定底坑">
                                <el-select v-model="bindForm.pit" placeholder="请选择底坑">
                                    <el-option v-for="pit in allPits" :key="pit" :label="pit" :value="pit"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绑定集水井">
                                <el-select v-model="bindForm.sump" placeholder="请选择集水井">
                                    <el-option v-for="sump in allSumps" :key="sump" :label="sump" :value="sump"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="bindDialogVisible=false">取 消</el-button>
                            <el-button type="primary" @click="saveBindInfo">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <!-- 2. 综合仪表盘 -->
                <el-tab-pane label="综合仪表盘" name="dashboard">
                    <div style="margin-bottom:18px;display:flex;align-items:center;gap:18px;">
                        <el-select v-model="dashboardElevators" multiple placeholder="请选择电梯" style="width:320px;" @change="updateDashboardElevators">
                            <el-option label="全部" value="全部"></el-option>
                            <el-option v-for="e in elevators" :key="e.name" :label="e.name" :value="e.name"></el-option>
                        </el-select>
                    </div>
                    <div class="elevator-2d-list">
                        <div class="elevator-2d-cards">
                            <div v-for="item in filteredDashboardElevators" :key="item.name"
                                class="elevator-2d-card"
                                :class="[
                                    item.offline ? 'is-offline' : (item.alert ? 'is-alert' : (item.withPeople ? 'is-occupied is-normal' : 'is-normal'))
                                ]">
                                <!-- 左侧：动态电梯井区 -->
                                <div class="elevator-shaft">
                                    <div class="shaft-track">
                                        <div v-for="n in item.totalFloors" :key="n" class="shaft-tick"
                                            :class="{'active': n === item.currentFloor}"></div>
                                    </div>
                                    <transition name="elevator-move">
                                        <div v-if="item.currentFloor" class="elevator-car"
                                            :style="{ bottom: ((item.currentFloor-1)/(item.totalFloors-1)*100)+'%' }">
                                            <i class="el-icon-box"></i>
                                            <!-- 上下行箭头 -->
                                            <transition name="arrow-fade">
                                                <i v-if="item.direction==='上行'" class="el-icon-caret-top shaft-arrow up"></i>
                                            </transition>
                                            <transition name="arrow-fade">
                                                <i v-if="item.direction==='下行'" class="el-icon-caret-bottom shaft-arrow down"></i>
                                            </transition>
                                        </div>
                                    </transition>
                                </div>
                                <!-- 右侧：信息区 -->
                                <div class="elevator-info">
                                    <div class="elevator-title-row">
                                        <span class="elevator-title">{{item.name}}</span>
                                        <i v-if="item.alert && !item.offline" class="el-icon-warning info-alert"></i>
                                        <i v-if="item.offline" class="el-icon-link info-offline"></i>
                                    </div>
                                    <div class="elevator-floor-row">
                                        <span class="elevator-floor">{{item.currentFloor ? item.currentFloor + 'F' : '--'}}</span>
                                        <span class="elevator-direction">{{item.direction}}</span>
                                    </div>
                                    <div class="elevator-status-row">
                                        <span class="elevator-user">
                                            <i class='bx bx-user' :class="{'user-on': item.withPeople, 'user-off': !item.withPeople}"></i>
                                            <span>{{item.withPeople ? '有人' : '无人'}}</span>
                                        </span>
                                    </div>
                                    <div class="elevator-tag-row">
                                        <span v-if="item.offline" class="elevator-tag tag-offline">[离线]</span>
                                        <span v-else-if="item.alert" class="elevator-tag tag-alert">[故障]</span>
                                        <span v-else class="elevator-tag tag-normal">[正常]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- 3. 设备详情监控 -->
                <el-tab-pane label="设备详情监控" name="device">
                    <el-select v-model="selectedElevator" placeholder="请选择电梯" style="margin-bottom:16px;width:220px;">
                        <el-option v-for="e in elevators" :key="e.name" :label="e.name" :value="e.name"></el-option>
                    </el-select>
                    <!-- 1. 电梯运行情况 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">电梯轿厢情况</div>
                        <el-row :gutter="16">
                            <el-col :span="8">当前楼层：{{getElevatorRunInfo(selectedElevator).floor}}</el-col>
                            <el-col :span="8">门状态：{{getElevatorRunInfo(selectedElevator).door}}</el-col>
                            <el-col :span="8">是否载人：{{getElevatorRunInfo(selectedElevator).withPeople}}</el-col>
                        </el-row>
                    </el-card>
                    <!-- 2. 空调运行情况 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header" style="display:flex;align-items:center;justify-content:space-between;">
                            <span>电梯空调运行情况</span>
                            <el-button size="mini" type="primary" @click="openACControlDialog">控制空调</el-button>
                        </div>
                        <el-row :gutter="16">
                            <el-col :span="5">轿厢温度：{{getElevatorACInfo(selectedElevator).carTemp}}</el-col>
                            <el-col :span="5">设定温度：{{getElevatorACInfo(selectedElevator).setTemp}}</el-col>
                            <el-col :span="4">电流：{{getElevatorACInfo(selectedElevator).current}}</el-col>
                            <el-col :span="4">电压：{{getElevatorACInfo(selectedElevator).voltage}}</el-col>
                            <el-col :span="6">功率：{{getElevatorACInfo(selectedElevator).power}}</el-col>
                        </el-row>
                    </el-card>
                    <!-- 空调控制弹窗 -->
                    <el-dialog :visible.sync="acControlDialogVisible" title="空调控制" width="400px" append-to-body>
                        <el-radio-group v-model="acControlType" style="margin-bottom:18px;">
                            <el-radio label="switch">控制开关</el-radio>
                            <el-radio label="temp">控制温度</el-radio>
                        </el-radio-group>
                        <div v-if="acControlType==='switch'">
                            <el-radio-group v-model="acSwitchValue">
                                <el-radio label="开">开</el-radio>
                                <el-radio label="关">关</el-radio>
                            </el-radio-group>
                        </div>
                        <div v-else-if="acControlType==='temp'">
                            <el-select v-model="acTempValue" placeholder="请选择温度" style="width:120px;">
                                <el-option v-for="n in 13" :key="n" :label="(n+17)+'℃'" :value="n+17"></el-option>
                            </el-select>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="acControlDialogVisible=false">取 消</el-button>
                            <el-button type="primary" @click="sendACControl">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 3. 电梯机房环境 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">电梯机房环境</div>
                        <el-row :gutter="16">
                            <el-col :span="12">温度：{{getMachineRoomEnv(selectedElevator).temp}}</el-col>
                            <el-col :span="12">湿度：{{getMachineRoomEnv(selectedElevator).humidity}}</el-col>
                        </el-row>
                    </el-card>
                    <!-- 4. 底坑环境 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">底坑环境</div>
                        <el-row :gutter="16">
                            <el-col :span="24">水浸情况：
                                <el-tag :type="getPitEnv(selectedElevator).waterLeak==='水浸'?'danger':'success'" size="mini">{{getPitEnv(selectedElevator).waterLeak}}</el-tag>
                            </el-col>
                        </el-row>
                    </el-card>
                    <!-- 5. 集水井液位和水泵情况 -->
                    <el-card class="section" shadow="hover" style="margin-bottom:18px;">
                        <div slot="header">集水井信息</div>
                        <div v-for="well in getSumpWellInfo(selectedElevator)" :key="well.name" style="margin-bottom:18px;">
                            <div style="font-weight:bold;margin-bottom:6px;">{{well.name}} 液位：<span style="color:#1565C0">{{well.liquid}}</span></div>
                            <el-table :data="well.pumps||[]" border stripe class="device-table" size="small">
                                <el-table-column prop="name" label="水泵名称" width="120"></el-table-column>
                                <el-table-column prop="status" label="水泵状态" width="120">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status==='启动'?'success':(scope.row.status==='停止'?'info':(scope.row.status==='故障'?'danger':'warning'))" size="mini">{{scope.row.status}}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mode" label="控制模式" width="100">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.row.mode" :type="scope.row.mode==='自动'?'success':'info'" size="mini">{{scope.row.mode}}</el-tag>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="temp" label="水泵温度"></el-table-column>
                                <el-table-column prop="noise" label="水泵噪声"></el-table-column>
                                <el-table-column prop="current" label="电流"></el-table-column>
                                <el-table-column prop="voltage" label="电压"></el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                    <!-- 6. 告警列表 -->
                    <el-card class="section alarm-section-card" shadow="hover" style="margin-bottom:0; border:2px solid #F56C6C; background:#FEF0F0;">
                        <div slot="header" style="color:#C62828; font-weight:bold; display:flex; align-items:center;"><i class="el-icon-warning-outline" style="margin-right:8px;"></i>告警列表</div>
                        <el-table :data="getElevatorAlerts(selectedElevator)" border stripe class="alert-table" size="small">
                            <el-table-column prop="type" label="告警类型"></el-table-column>
                            <el-table-column prop="status" label="状态"></el-table-column>
                            <el-table-column prop="time" label="时间"></el-table-column>
                        </el-table>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#elevator-monitor',
            data() {
                return {
                    activeTab: 'list',
                    elevators: [
                        { name: 'A1-1客', location: 'A1', status: '运行', alert: false, offline: false, currentFloor: 1, totalFloors: 20, direction: '上行', withPeople: true },
                        { name: 'A1-2客', location: 'A1', status: '运行', alert: false, offline: false, currentFloor: 11, totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A2-1客', location: 'A2', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A2-2客', location: 'A2', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A3-1客', location: 'A3', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A3-2客', location: 'A3', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A4-1客', location: 'A4', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A4-2客', location: 'A4', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A5-1客', location: 'A5', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A5-2客', location: 'A5', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A6-1边货', location: 'A6', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A6-江边货', location: 'A6', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A7-1客', location: 'A7', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false },
                        { name: 'A7-3客', location: 'A7', status: '未安装', alert: true, offline: false, currentFloor: '', totalFloors: 20, direction: '静止', withPeople: false }
                    ],
                    dashboardElevators: ['全部'],
                    dashboardPeriod: 'day',
                    selectedElevator: '1号电梯',
                    runRecords: [
                        { time: '2024-06-01 08:00', event: '正常运行', operator: '系统' },
                        { time: '2024-06-01 09:30', event: '检修', operator: '张工' },
                        { time: '2024-06-01 10:10', event: '恢复运行', operator: '系统' },
                        { time: '2024-06-01 12:00', event: '故障停运', operator: '系统' }
                    ],
                    bindDialogVisible: false,
                    bindForm: {
                        car: '',
                        machineRoom: '',
                        ac: '',
                        pit: '',
                        sump: ''
                    },
                    allCars: ['轿厢A', '轿厢B'],
                    allMachineRooms: ['机房A', '机房B'],
                    allAcs: ['空调控制器A', '空调控制器B'],
                    allPits: ['底坑A', '底坑B'],
                    allSumps: ['集水井1', '集水井2'],
                    // 新增mock数据
                    elevatorRunInfo: {
                        'A1-1客': { floor: '1', door: '关闭', withPeople: '是' },
                        'A1-2客': { floor: '11', door: '开启', withPeople: '否' },
                        'A2-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A2-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A3-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A3-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A4-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A4-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A5-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A5-2客': { floor: '-', door: '-', withPeople: '-' },
                        'A6-1边货': { floor: '-', door: '-', withPeople: '-' },
                        'A6-江边货': { floor: '-', door: '-', withPeople: '-' },
                        'A7-1客': { floor: '-', door: '-', withPeople: '-' },
                        'A7-3客': { floor: '-', door: '-', withPeople: '-' }
                    },
                    elevatorACInfo: {
                        'A1-1客': { carTemp: '26℃', setTemp: '24℃', current: '2A', voltage: '220V', power: '0.5kW' },
                        'A1-2客': { carTemp: '25℃', setTemp: '23℃', current: '2.1A', voltage: '220V', power: '0.48kW' },
                        'A2-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A2-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A3-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A3-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A4-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A4-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A5-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A5-2客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A6-1边货': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A6-江边货': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A7-1客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' },
                        'A7-3客': { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' }
                    },
                    machineRoomEnv: {
                        'A1-1客': { temp: '32℃', humidity: '60%' },
                        'A1-2客': { temp: '31℃', humidity: '58%' },
                        'A2-1客': { temp: '-', humidity: '-' },
                        'A2-2客': { temp: '-', humidity: '-' },
                        'A3-1客': { temp: '-', humidity: '-' },
                        'A3-2客': { temp: '-', humidity: '-' },
                        'A4-1客': { temp: '-', humidity: '-' },
                        'A4-2客': { temp: '-', humidity: '-' },
                        'A5-1客': { temp: '-', humidity: '-' },
                        'A5-2客': { temp: '-', humidity: '-' },
                        'A6-1边货': { temp: '-', humidity: '-' },
                        'A6-江边货': { temp: '-', humidity: '-' },
                        'A7-1客': { temp: '-', humidity: '-' },
                        'A7-3客': { temp: '-', humidity: '-' }
                    },
                    pitEnv: {
                        'A1-1客': { waterLeak: '非水浸' },
                        'A1-2客': { waterLeak: '非水浸' },
                        'A2-1客': { waterLeak: '-' },
                        'A2-2客': { waterLeak: '-' },
                        'A3-1客': { waterLeak: '-' },
                        'A3-2客': { waterLeak: '-' },
                        'A4-1客': { waterLeak: '-' },
                        'A4-2客': { waterLeak: '-' },
                        'A5-1客': { waterLeak: '-' },
                        'A5-2客': { waterLeak: '-' },
                        'A6-1边货': { waterLeak: '-' },
                        'A6-江边货': { waterLeak: '-' },
                        'A7-1客': { waterLeak: '-' },
                        'A7-3客': { waterLeak: '-' }
                    },
                    sumpWells: {
                        'A1-1客': [
                            { name: '集水井1', liquid: '40%', pumps: [
                                { name: '集水井水泵1', status: '启动', mode: '自动', temp: '32℃', noise: '40dB', current: '5A', voltage: '380V' },
                                { name: '集水井水泵2', status: '停止', mode: '手动', temp: '30℃', noise: '42dB', current: '0A', voltage: '380V' }
                            ]}
                        ],
                        'A1-2客': [
                            { name: '集水井1', liquid: '35%', pumps: [
                                { name: '集水井水泵1', status: '启动', mode: '自动', temp: '31℃', noise: '41dB', current: '4.8A', voltage: '380V' }
                            ]}
                        ],
                        'A2-1客': [],
                        'A2-2客': [],
                        'A3-1客': [],
                        'A3-2客': [],
                        'A4-1客': [],
                        'A4-2客': [],
                        'A5-1客': [],
                        'A5-2客': [],
                        'A6-1边货': [],
                        'A6-江边货': [],
                        'A7-1客': [],
                        'A7-3客': []
                    },
                    acControlDialogVisible: false,
                    acControlType: '', // 'switch' or 'temp'
                    acSwitchValue: '',
                    acTempValue: null,
                }
            },
            computed: {
                filteredDashboardElevators() {
                    if (this.dashboardElevators.includes('全部')) {
                        return this.elevators;
                    }
                    return this.elevators.filter(e => this.dashboardElevators.includes(e.name));
                }
            },
            methods: {
                getRandom(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                },
                // 新增获取方法
                getElevatorRunInfo(name) {
                    return this.elevatorRunInfo[name] || { floor: '-', door: '-', withPeople: '-' };
                },
                getElevatorACInfo(name) {
                    return this.elevatorACInfo[name] || { carTemp: '-', setTemp: '-', current: '-', voltage: '-', power: '-' };
                },
                getMachineRoomEnv(name) {
                    return this.machineRoomEnv[name] || { temp: '-', humidity: '-' };
                },
                getPitEnv(name) {
                    return this.pitEnv[name] || { waterLeak: '-' };
                },
                getSumpWellInfo(name) {
                    return this.sumpWells[name] || [];
                },
                getElevatorParams(name) {
                    if (!name) return [];
                    if (name === '1号电梯') return [
                        { param: '当前楼层', value: '5' },
                        { param: '运行速度', value: '1.5m/s' },
                        { param: '载重', value: '800kg' },
                        { param: '门状态', value: '关闭' }
                    ];
                    if (name === '2号电梯') return [
                        { param: '当前楼层', value: '1' },
                        { param: '运行速度', value: '1.5m/s' },
                        { param: '载重', value: '800kg' },
                        { param: '门状态', value: '开启' }
                    ];
                    if (name === '3号电梯') return [
                        { param: '当前楼层', value: 'B1' },
                        { param: '运行速度', value: '0m/s' },
                        { param: '载重', value: '0kg' },
                        { param: '门状态', value: '关闭' }
                    ];
                    return [];
                },
                getElevatorAlerts(name) {
                    if (name === '3号电梯') return [
                        { type: '故障停运', status: '未处理', time: '2024-06-01 12:00' }
                    ];
                    return [];
                },
                openBindDialog(row) {
                    this.bindForm = {
                        car: '',
                        machineRoom: '',
                        ac: '',
                        pit: '',
                        sump: ''
                    };
                    this.bindDialogVisible = true;
                },
                saveBindInfo() {
                    this.$message.success('保存成功（演示）');
                    this.bindDialogVisible = false;
                },
                openACControlDialog() {
                    this.acControlDialogVisible = true;
                    this.acControlType = '';
                    this.acSwitchValue = '';
                    this.acTempValue = null;
                },
                sendACControl() {
                    if (this.acControlType === 'switch') {
                        if (!this.acSwitchValue) {
                            this.$message.warning('请选择开或关');
                            return;
                        }
                        this.$message.success('已下发空调' + this.acSwitchValue + '指令（演示）');
                        this.acControlDialogVisible = false;
                    } else if (this.acControlType === 'temp') {
                        if (!this.acTempValue) {
                            this.$message.warning('请选择温度');
                            return;
                        }
                        this.$message.success('已下发设定温度' + this.acTempValue + '℃指令（演示）');
                        this.acControlDialogVisible = false;
                    } else {
                        this.$message.warning('请选择控制类型');
                    }
                },
                updateDashboardElevators(val) {
                    if (val.includes('全部')) {
                        this.dashboardElevators = ['全部'];
                    } else if (this.dashboardElevators.length === 0) {
                        this.dashboardElevators = ['全部'];
                    }
                }
            }
        });
    </script>
    <style scoped>
        .elevator-2d-list {
            margin-top: 10px;
        }
        .elevator-2d-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 18px;
        }
        .elevator-2d-label {
            width: 48px;
            font-size: 32px;
            color: #bdbdbd;
            font-weight: bold;
            text-align: center;
            margin-right: 18px;
            flex-shrink: 0;
        }
        .elevator-2d-cards {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
        }
        .elevator-2d-card {
            display: flex;
            align-items: center;
            background: #f8fafd;
            border-radius: 14px;
            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
            padding: 18px 28px 18px 18px;
            min-width: 270px;
            min-height: 120px;
            border: 2px solid #e3eaf2;
            transition: box-shadow 0.25s cubic-bezier(.4,2,.6,1), transform 0.18s cubic-bezier(.4,2,.6,1), border-color 0.3s;
            position: relative;
            overflow: hidden;
        }
        .elevator-2d-card:hover {
            box-shadow: 0 6px 24px 0 rgba(64,158,255,0.18);
            transform: scale(1.035);
            z-index: 2;
        }
        .elevator-2d-card.is-normal {
            border-color: #409EFF;
        }
        .elevator-2d-card.is-occupied {
            box-shadow: 0 0 0 2px #67C23A33;
        }
        .elevator-2d-card.is-alert {
            border-color: #F56C6C;
            animation: alert-glow 1.6s infinite alternate;
        }
        @keyframes alert-glow {
            0% { box-shadow: 0 0 0 0 #F56C6C33; }
            100% { box-shadow: 0 0 16px 4px #F56C6C66; }
        }
        .elevator-2d-card.is-offline {
            filter: grayscale(1);
            opacity: 0.6;
            border-color: #909399;
            pointer-events: none;
        }
        .elevator-shaft {
            width: 48px;
            height: 100px;
            margin-right: 18px;
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .shaft-track {
            width: 10px;
            height: 100%;
            background: linear-gradient(180deg, #e3eaf2 60%, #b3d8ff 100%);
            border-radius: 6px;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1;
        }
        .shaft-tick {
            width: 10px;
            height: 3px;
            background: #b3d8ff;
            opacity: 0.5;
            border-radius: 2px;
            margin: 1px 0;
        }
        .shaft-tick.active {
            background: #409EFF;
            opacity: 1;
            box-shadow: 0 0 6px #409EFF99;
        }
        .elevator-car {
            width: 32px;
            height: 24px;
            background: #409EFF;
            border-radius: 6px 6px 8px 8px;
            box-shadow: 0 2px 12px 0 #409EFF44;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: bottom 0.7s cubic-bezier(.4,2,.6,1);
            z-index: 2;
        }
        .elevator-car i.el-icon-box {
            font-size: 18px;
            color: #fff;
        }
        .elevator-car .shaft-arrow {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
            color: #409EFF;
            text-shadow: 0 0 8px #b3d8ff;
            opacity: 0.85;
        }
        .shaft-arrow.up {
            top: -18px;
            animation: arrow-up 1.2s infinite alternate;
        }
        .shaft-arrow.down {
            bottom: -18px;
            animation: arrow-down 1.2s infinite alternate;
        }
        @keyframes arrow-up {
            0% { top: -18px; opacity: 0.7; }
            100% { top: -24px; opacity: 1; }
        }
        @keyframes arrow-down {
            0% { bottom: -18px; opacity: 0.7; }
            100% { bottom: -24px; opacity: 1; }
        }
        .elevator-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
        }
        .elevator-title-row {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            color: #1565C0;
            margin-bottom: 2px;
            gap: 8px;
        }
        .elevator-title {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .info-alert {
            color: #F56C6C;
            font-size: 22px;
            margin-left: 2px;
            animation: alert-glow 1.6s infinite alternate;
        }
        .info-offline {
            color: #909399;
            font-size: 22px;
            margin-left: 2px;
        }
        .elevator-floor-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 2px;
        }
        .elevator-floor {
            font-size: 28px;
            font-weight: bold;
            color: #409EFF;
            letter-spacing: 1px;
        }
        .elevator-direction {
            font-size: 15px;
            color: #1565C0;
            font-weight: 500;
        }
        .elevator-status-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 2px;
        }
        .elevator-user {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 15px;
        }
        .elevator-user .bx-user {
            font-size: 20px;
            vertical-align: middle;
            transition: color 0.3s;
        }
        .elevator-user .user-on {
            color: #409EFF;
            text-shadow: 0 0 8px #b3d8ff;
        }
        .elevator-user .user-off {
            color: #bdbdbd;
        }
        .elevator-tag-row {
            margin-top: 2px;
        }
        .elevator-tag {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 1px;
            margin-right: 6px;
        }
        .tag-normal {
            background: #e3f2fd;
            color: #409EFF;
            border: 1px solid #90caf9;
        }
        .tag-alert {
            background: #fff0f0;
            color: #F56C6C;
            border: 1px solid #F56C6C;
            animation: alert-glow 1.6s infinite alternate;
        }
        .tag-offline {
            background: #f5f7fa;
            color: #909399;
            border: 1px solid #bdbdbd;
        }
    </style>
</body>
</html> 